<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>实时图表</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
	
		$("#openClose").hover(function() {
			closeTree();
		});
		
		$(document).ready(function() {
			var load = layer.load(1);
			$.ajax({
				type: "post",
				dataType: "json",
				url: "${ctx}/ccsenhumidata/sensorHumiData/getchartsData",
				data: {},
				timeout: 6000,
				success: function(data){
					layer.close(load);
					var nameArr = data.nameArr;
					var macArr = data.macArr;
					var timeArr = data.timeArr;
					var tempArr = data.tempArr;
					var minArr = data.minArr;
					var maxArr = data.maxArr;
					var statusArr = data.statusArr;
					
					//设置当前层级
					if(data.nowLevel != ""){
						$("#nowLevel").html("[" + data.nowLevel + "]");
					}
					for(var i=-1; i<nameArr.length-1; i=i+5){
						$("#chartsTable").append("<tr id='tr" + i +"'>");
						for(var j=1; j<6; j++){
							$("#tr" + i +"").append("<td class='charts-td'> <div id='charts" + (i+j) + "'class='charts'></div></td>");
						}
						$("#chartsTable").append("</tr>");
					}
					for(var i=0; i<data.nameArr.length; i++){
						myChart = echarts.init(document.getElementById('charts' + i));
						option = {
							title: {
				                text: nameArr[i] + '温度   (温度' + statusArr[i] + ")", //标题文本内容
				                x: 'center',
			                	y: 'bottom',
			                	padding: [0,0,30,0],
			                	subtext: timeArr[i],
				                textStyle:{
				                	x: 'left',
				                	y: 'bottom',
				                	fontSize: 13,
								    fontWeight: 'bolder',
								    color: '#000000'
				                },
				                subtextStyle:{
				                	fontSize: 13,
				                }
				            },
						    toolbox: {
						    	show: false,
						        feature: {
						            restore: {},
						            saveAsImage: {}
						        }
						    },
						    series: [
						        {
						            name: '',
						            type: 'gauge',
						            min: minArr[i],
	            					max: maxArr[i],
						            data: [{value: tempArr[i], name: ''}],
						            axisLine: {            // 坐标轴线  
									    lineStyle: {       // 属性lineStyle控制线条样式  
									         color: [[0.2, '#62879F'], [0.8, '#91C7AF'], [1, '#C33430']],
									         width: 7 // 这个是修改宽度的属性 
									    }  
									}, 
									axisTick: {            // 坐标轴小标记
						                length: 11.5,        // 属性length控制线长
						                lineStyle: {       // 属性lineStyle控制线条样式
						                    color: 'auto'
						                }
						            },
						            splitLine: {           // 分隔线
						                length: 15,         // 属性length控制线长
						                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
						                    color: 'auto'
						                }
						            },
						            pointer: {
				                        show: true,
				                        length: '66%',
				                        width: 8,
				                    },
				                    detail: {
				                        show: true,
				                        //offsetCenter: [0, '50%'],
				                        formatter: '{value}℃',
				                        textStyle: {
				                            fontSize: 25
				                        }
				                    },
						        }							        
						    ]
						};							
						myChart.setOption(option);
					}
				},
				error: function(){
					layer.close(load);
				}
	        	
	        });
		});
		
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
        
        function closeTree(){
			var openCloseDiv = document.getElementById('openClose'); 
			openCloseDiv.click();
		}
        
	</script>
	<style type="text/css">
		body{
			color: #000000;
		}
		.charts-td{
			width: 20%;
			text-align:center;
		}
		.charts{
			height: 300px;
		}
		#right {
			height: 94%;
		}
		#officeContent{
			border: none;
		}
		#nowLevel{
			color: #000;
		}
	</style>
</head>
<body>
	<div id="content" class="row-fluid">
		<div id="left">
			<div class="accordion-heading">
		    	<a class="accordion-toggle">组织树
		    		<i id="colseBtn" class="icon-remove pull-right" onclick="closeTree();"></i>
		    		<label id="nowLevel"></label>
		    	</a>
		    </div>
			<iframe id="officeContent" src="${ctx}/cchierarchy/hierarchy/list" width="100%" height="100%" ></iframe>
		</div>
		<div id="openClose" class="close" >&nbsp;</div>
		<div id="right">
			<ul class="nav nav-tabs">
				<li class="active"><a href="${ctx}/ccsenhumidata/sensorHumiData/currentStatusCharts">实时数据图表</a></li>
				<li><a href="${ctx}/ccsenhumidata/sensorHumiData/currentStatus">温(湿)度明细</a></li>
			</ul>
			<Table id="chartsTable" style="width: 100%; height: 100%;"></Table>
			<!-- <Table id="chartsTableHide" style="width: 100%; height: 100%;display: none;"></Table> -->
		</div>
	</div>
	<script type="text/javascript">
	   	
		var leftWidth = "350"; // 左侧窗口大小
		var htmlObj = $("html"), mainObj = $("#main");
		var frameObj = $("#left, #openClose, #right, #right iframe");
		function wSize(){
			var strs = getWindowSize().toString().split(",");
			/* htmlObj.css({"overflow-x":"hidden", "overflow-y":"hidden"}); */
			mainObj.css("width","auto");
			frameObj.height(strs[0] - 5);
			var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
			$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
			$(".ztree").width(leftWidth - 10).height(frameObj.height() - 46);
		}
	</script>
	<script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>
	
</body>
</html>